<template>
    <div>
        <div class="nav">
            <a href="/">主页</a>
            / 何处购买
        </div>
        <div class="whereToBuyContainer">
        <div class="customeRow">
            <div class="whereToBuyItem">
                <h1 class="whereToBuyItemTitle">世界零售店铺查找</h1>
                <div class="whereToBuyLine"></div>
                <div class="whereToBuyItemBody">
                    <p>无论您在世界各地，您都可以通过以下链接找到您附近的Billingham官方零售商店铺，从而以最便捷的方式购买您所需要的正品 Billingham包。需要注意的是，大多数零售商店铺不会库存我们的所有商品。</p>
                    <p>零售店铺查找器：<a href="https://billingham.co.uk/apps/store-locator" target="_blank">https://billingham.co.uk/apps/store-locator</a></p>
                </div>
            </div>
            <div class="whereToBuyItem">
                <h1 class="whereToBuyItemTitle">官网线上门店</h1>
                <div class="whereToBuyLine"></div>
                <div class="whereToBuyItemBody">
                    <div class="store"><img src="../assets/20200708181149.jpg" alt="billingham"></div>
                    <div class="message">
                        <div>官方线上商城</div>
                        <div>微信扫一扫即可即刻进入商城选购产品</div>
                        <div>所有产品英国UPS直邮</div>
                    </div>
                </div>
            </div>
            <div class="whereToBuyItem marginTop">
                <h1 class="whereToBuyItemTitle">中国零售店铺</h1>
                <div class="whereToBuyLine"></div>
                <div class="whereToBuyItemBody">
                    <div class="whereToBuyItemBodyItem">
                        <div class="whereToBuyItemBodyItemLeft">
                            <img src="../assets/20200708182744.jpg" alt="billingham">
                        </div>
                        <div class="whereToBuyItemBodyItemRight">
                            <div class="message">
                                <div class="whereToBuyItemBodyItemTitle">
                                    北京
                                </div>
                                <div class="whereToBuyItemBodyItemAddress">
                                    北京天诺大陆科技有限公司
                                </div>
                                <div class="whereToBuyItemBodyItemAddress">
                                    地址：中国北京市西城区马连道一商大厦1325室
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="whereToBuyItemBodyItem">
                        <div class="whereToBuyItemBodyItemLeft pc">
                            <div class="message">
                                <div class="whereToBuyItemBodyItemTitle">
                                    上海
                                </div>
                                <div class="whereToBuyItemBodyItemAddress">
                                    上海威梵贸易有限公司
                                </div>
                                <div class="whereToBuyItemBodyItemAddress">
                                    地址：中国上海市黄浦区鲁班路300号
                                </div>
                                <div class="whereToBuyItemBodyItemAddress">
                                    星光摄影器材城A区410号
                                </div>
                            </div>
                        </div>
                        <div class="whereToBuyItemBodyItemRight">
                            <img src="../assets/20200708182734.jpg" alt="billingham">
                        </div>
                        <div class="whereToBuyItemBodyItemLeft phone">
                            <div class="message">
                                <div class="whereToBuyItemBodyItemTitle">
                                    上海
                                </div>
                                <div class="whereToBuyItemBodyItemAddress">
                                    上海威梵贸易有限公司
                                </div>
                                <div class="whereToBuyItemBodyItemAddress">
                                    地址：中国上海市黄浦区鲁班路300号
                                </div>
                                <div class="whereToBuyItemBodyItemAddress">
                                    星光摄影器材城A区410号
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="whereToBuyItem">
                <h1 class="whereToBuyItemTitle">零售商线上商城</h1>
                <div class="whereToBuyLine"></div>
                <div class="whereToBuyItemBody">
                    <div class="onlineStore">
                        <div>京东：</div>
                        <div>威梵摄影器材：<a href="https://weifansm.jd.com/" target="_blank">weifansm.jd.com</a></div>
                        <div>天诺影像 ：<a href="https://tiannuosm.jd.com/" target="_blank">https://tiannuosm.jd.com/</a></div>
                    </div>
                    <div class="onlineStore">
                        <div>淘宝:</div>
                        <div>天诺影像 ：<a href="https://leica-china.taobao.com/" target="_blank">https://leica-china.taobao.com/</a></div>
                        <div>晨源摄影器材 ：<a href="https://cdycmt.taobao.com/" target="_blank">cdycmt.taobao.com</a></div>
                        <div>天瑞摄影器材店 ：<a href="https://glmages.taobao.com/" target="_blank">glmages.taobao.com</a></div>
                    </div>
                </div>
            </div>
        </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'Blog',
        data: () => {
            return {
            }
        },
        components: {},
        // metaInfo() {
        //     return serve.handleSetMeta('contact_us','/contact-us');
        // },
        props: {},
        mounted() {
            this.$store.dispatch('changeLoading', 'false');
        },
        methods: {

        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    p{
        line-height: 24px;
    }
    p a{
        color: #000;
        display: inline-block;
        border-bottom: 1px solid #999;
        text-decoration: none;
    }
    .whereToBuyItem.marginTop{
        margin-top: 40px;
    }
    .whereToBuyItemTitle{
        text-align: center;
        font-size: 18px;
        margin-top: 10px;
    }
    .whereToBuyLine{
        background: #999;
        width: 100px;
        margin: 0 auto;
        height: 1px;
    }
    .whereToBuyItemBody{
        font-size: 15px;
        margin-top: 30px;
    }
    .whereToBuyItemBody div{
        text-align: center;
        line-height: 30px;
    }
    .whereToBuyItemBody .message{
        margin:20px 0;
    }
    .whereToBuyItemBody .store img{
        width: 200px;
    }
    .whereToBuyItemBodyItem{
        display: flex;
        align-items: center;
        font-weight: bold;
        margin-bottom: 40px;
    }
    .whereToBuyItemBodyItemLeft{
        width: 50%;
        min-width: 50%;
    }
    .whereToBuyItemBodyItemLeft.pc{
        display: block;
    }
    .whereToBuyItemBodyItemLeft.phone{
        display: none;
    }
    .whereToBuyItemBodyItemLeft img{
        width: 100%;
    }
    .whereToBuyItemBodyItemRight img{
        width: 100%;
    }
    .whereToBuyItemBodyItemLeft .message{
        padding-right: 50px;
    }
    .whereToBuyItemBodyItemLeft .message div{
        text-align: right;
    }
    .whereToBuyItemBodyItemRight .message div{
        text-align: left;
        padding-left: 50px;
    }
    .whereToBuyItemBodyItemTitle{
        font-size: 16px;
        margin-bottom: 10px;
    }
    .onlineStore{
        font-weight: bold;
        margin-bottom: 30px;
    }
    .onlineStore div{
        line-height: 24px;
    }
    .onlineStore a{
        font-weight: bold;
        color: #000;
    }
    @media screen and (max-width: 1280px){
        .whereToBuyContainer{
            padding: 0 10px;
        }
    }
    @media screen and (max-width: 500px){
        .whereToBuyItemBodyItem{
            display: block;
        }
        .whereToBuyItemBodyItemLeft{
            width: 100%;
        }
        .whereToBuyItemBodyItemRight div{
            margin-left: 0;
        }
        .whereToBuyItemBodyItemLeft.pc{
            display: none;
        }
        .whereToBuyItemBodyItemLeft.phone{
            display: block;
        }
        .whereToBuyItemBodyItemLeft .message div{
            text-align: left;
            padding-right: 0;
        }
        .whereToBuyItemBodyItemRight .message div{
            padding-left: 0;
        }
    }
</style>
